<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./static/static/vue.min.js"></script>
  <script src="./static/static/axios.min.js"></script>
  <!-- 本地引入lib-master -->
  <link rel="stylesheet" type="text/css" href="./static/lib-master/theme-chalk/index.css" />
  <script src="./static/lib-master/index.js" type="text/javascript" charset="utf-8"></script>
</head>
<style>
  input::-ms-input-placeholder {
    text-align: center;
  }

  input::-webkit-input-placeholder {
    text-align: center;
  }


  input::-webkit-input-placeholder {
    /* placeholder颜色 */
    /* placeholder字体大小 */

    font-size: 20px;
    color: black;
    font-weight: bold;
  }

  form .text {
    display: inline-block;
    border: 0;
    width: 260px;
    height: 35px;
    font-size: 14px;
    outline: none;

    border: 2px solid #01af63;
  }

  form .search {

    width: 90px;
    height: 38px;
    border: 0;
    outline: none;
    cursor: pointer;
    /*   cursor: pointer;   鼠标悬停或点击时button时鼠标变成其他图标  */
    text-align: center;
    line-height: 40px;
    background-color: #01af63;
    color: #FFFFFF;
  }

  .parent {
    width: 100%;
    height: 150px;
    display: flex;
    flex-flow: row wrap;
    align-content: flex-start;
  }

  .child {
    box-sizing: border-box;
    background-color: white;
    flex: 0 0 33%;
    height: 50px;
    border: 5px solid black;
  }

  /* a:link {
       font-size: 10pt;
       color: #0000cc;
       font-family: 宋体;
       text-align: left;
       text-decoration: underline;
       TEXT-DECORATION:none;
}
a:visited {
       font-size: 9pt;
       color: #0000cc;
       font-family: 宋体;
       text-align: left;
       text-decoration: underline;
       TEXT-DECORATION:none;
}

a:hover {
       color: #993300;
       text-decoration: underline;
       TEXT-DECORATION:none;
}
a:active {
       color: #ff0033;
       text-decoration: none;
} */

  * {
    margin: 0;
    padding: 0;
  }

  .nva {
    width: auto;
    height: 50px;
    margin: 100px auto;
    border: 1px solid red;

  }

  ul {
    list-style: none;
  }

  div ul li {
    float: left;
    height: 50px;
    width: 120px;
    text-align: center;
    line-height: 50px;
  }

  div ul li a {
    display: block;
    width: 100px;
    height: 50px;
  }

  div ul li a:link,
  div ul li a:visited {
    text-decoration: none;
    background-color: purple;
    color: white;
  }

  div ul li a:hover {
    background-color: orange;
  }
</style>

<body>
  <div id='app'>

    <div style="width: 100%;text-align: center;">
      <ul>
        <li class="nav_li">
          <a href="http://127.0.0.1:5500/findHouse-vue/searchRentHouse.html">租房</a>
        </li>
        <li class="nav_li">
          <a href="http://localhost:7001/newHouseList?flag=1">新房</a>
        </li>
        <li class="nav_li">
          <a href="http://localhost:7001/newHouseList?flag=2">二手房</a>
        </li>
      </ul>
    </div>

    <center>
      <span style="color: red;"></span>
      <el-input id="textArea" v-model="key" placeholder="请输入要搜索的内容" style="width: 900px;text-align: center;" clearable>
      </el-input>
      <el-button icon="el-icon-search" @click="search()" circle></el-button>
    </center>
    <br><br>
    <!-- <div class="nva">
            <ul>
                <li>{{label.type}}:</li>
                <li v-for="(item,index) in label.desc"><a v-html="">{{item}}</a></li>
            </ul>
        </div>
        <div class="nva">
            <ul>
                <li>{{label.stutus}}:</li>
                <li v-for="(item,index) in label.stutuslist"><a v-html="item"></a></li>
            </ul>
        </div>
        <div class="nva">
            <ul>
                <li>{{label.price}}:</li>
                <li v-for="(item,index) in label.pricelist"><a v-html="item"></a></li>
            </ul>
        </div>
        <div class="nva">
            <ul>
                <li>{{label.cx}}:</li>
                <li v-for="(item,index) in label.cxlist"><a v-html="item"></a></li>
            </ul>
        </div> -->
    <div style="margin: auto;width: 900px;">
      <span
        style="color: black;font-weight: bold;font-size: 20px;text-align: left;">{{label.type}}:&nbsp;&nbsp;&nbsp;&nbsp;</span>
      <span v-for="(item,index) in label.desc">
        <span @click="getdesc(item)" v-html="item" style="color: black;font-weight: bold;font-size: 20px;"></span>&nbsp;
      </span>
      <br>
      <span style="color: black;font-weight: bold;font-size: 20px;">{{label.price}}:</span>
      <span v-for="(item,index) in label.pricelist">
        <span @click="getprice(item)" v-html="item"
          style="color: black;font-weight: bold;font-size: 20px;"></span>&nbsp;
      </span>
      <br>
      <span style="color: black;font-weight: bold;font-size: 20px;">{{label.stutus}}:</span>
      <span v-for="(item,index) in label.stutuslist">
        <span v-if="item==0">
          <span @click="getsearch(0)" style="color: black;font-weight: bold;font-size: 20px;">未出租</span>&nbsp;
        </span>
        <span v-if="item==1">
          <span @click="getsearch(1)" style="color: black;font-weight: bold;font-size: 20px;">出租</span>&nbsp;
        </span>
      </span>
      <br>
      <span style="color: black;font-weight: bold;font-size: 20px;">{{label.cx}}:</span>
      <span v-for="(item,index) in label.cxlist">
        <span v-if="item==1">
          <span @click="getcz(1)" style="color: black;font-weight: bold;font-size: 20px;">整租</span>&nbsp;
        </span>
        <span v-if="item==2">
          <span @click="getcz(2)" style="color: black;font-weight: bold;font-size: 20px;">合租</span>&nbsp;
        </span>
      </span>
    </div>
    <br><br>


    <div style="text-align: center;width: 100%;margin: auto;" v-if="list.length==0">
      <img style="margin: auto;"
        src="https://zhucaiyi.oss-cn-beijing.aliyuncs.com/2022-03-25/1648205718772_数据weikong.png">
    </div>
    <!-- 商品1 -->
    <!-- <span v-for="(item,index) in list"> -->
    <div style="align-items: center;width: 100%;" class="parent">

      <!-- 第1行 商品 -->
      <div class="child" v-for="(item,index) in list"
        style="display: table; border-spacing: 30px;text-align: center; margin: auto;width: 35%;;"
        @click="addOrUpdateHandle(item.houseId)">
        <!-- 商品1 -->
        <div style="width: 300px; height: 400px; background-color: #DCDCDC; display: table-cell;align-items: center;">
          <!-- 图片 -->
          <center><span style="font-size: 30px;">房源{{index+1}}</span> </center>
          <div style="margin: 30px;"> <img style="width: 400px; height: 200px" :src="item.defaultImg"></div>

          <div style="width: 100%; height: 100px; background-color: #F6F6F6; align-content: right;">
            <!-- 菜品名称 -->
            <div style="height: 5px;"></div>
            <div>

              <label style="font-size: 20px" v-html="item.houseName"></label>
            </div>
            <!-- 价格 -->
            <div style="margin-top: 1px">
              价格:
              <label style="color: red;font-weight: bolder;" v-html="item.housePrice"></label>
              户型:
              <label style="color: #696969" v-html="item.houseDesc"></label>
              小区:
              <label style="color: #696969" v-html="item.houseAddress"></label>
              面积:
              <label style="color: #696969" v-html="item.houseArea+'平方米'"></label>
            </div>
            <!-- 购买 -->
            <div style="margin-top: 1px">
              <input type="button" value="+" class="fileinput-button">
            </div>
          </div>
        </div>
      </div>
      <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
        :page-sizes="[6, 9, 50, 100]" :page-size="pageSize" :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
      <!-- 第2行 商品 -->
    </div>

    <!-- </span> -->
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        key: "",
        url: "http://localhost:8888/api",
        list: [],
        pageIndex: 1,
        pageSize: 6,
        totalPage: 0,
        label: [],
        priceList: [],
        status: [],
        flag: "",
        price: "",
        desc: "",
        cz: ""
      },
      //方法集合
      methods: {

        getcz (zt) {

          this.cz = zt;
          this.search()
        },
        getdesc (item) {

          this.desc = item;
          this.search()
        },
        getprice (price2) {

          this.price = price2
          this.search()
        },
        getsearch (flag1) {
          this.flag = flag1;
          this.search()
        },
        addOrUpdateHandle (id) {

          localStorage.setItem("id", id)
          location = "rentDesc.html"
        },
        search () {
          axios.post(`${this.url}/es/searchlist?searchparam=${this.key}&page=${this.pageIndex}&size=${this.pageSize}&status=${this.flag}&price=${this.price}&type=${this.desc}&cz=${this.cz}`).then(({ data }) => {

            console.log(data)
            this.list = data.list.list;
            this.totalPage = data.list.totalCount
            this.label = data.label;

          })
        },
        // 每页数
        sizeChangeHandle (val) {
          this.pageSize = val
          this.pageIndex = 1
          this.search()
        },
        // 当前页
        currentChangeHandle (val) {
          this.pageIndex = val
          this.search()
        },
      },
      created () {
        this.key = localStorage.getItem("name");
        this.search()
        //    this.key=""

      },
    })
  </script>
</body>

</html>